'use client'

import { useState } from 'react'
import OutlineButton from '@/components/common/OutlineButton'
import GradientButton from '@/components/common/GradientButton'

export default function PaymentMethod() {
  const [cardNumber, setCardNumber] = useState('1234 5678 9012 3456')
  const [cardName, setCardName] = useState('')
  const [expiry, setExpiry] = useState('')
  const [cvc, setCvc] = useState('')
  const [zip, setZip] = useState('')

  return (
    <div className="upload-card p-[16px]">
      <h2 className="text-lg font-semibold mb-6 text-white">Payment method</h2>

      {/* Current card info */}
      <div className="flex flex-wrap items-center justify-between gap-4 border border-[#1f2533] rounded-2xl  mb-8 ">
        <div className="flex items-center gap-3">
          <div className="bg-white text-black font-bold text-sm px-3 py-1.5 rounded-md">VISA</div>
          <div>
            <p className="text-sm text-gray-300">
              Visa •••• •••• •••• <span className="font-medium text-white">4242</span>
              <span className="ml-2 bg-[#0a0b10] border-solid border-[#2b3142] text-gray-300 text-xs px-2 py-0.5 rounded-[8px]">
                Default
              </span>
            </p>
            <p className="text-xs text-gray-500 mt-1">Exp 08/28 · Cardholder: W. Michael</p>
          </div>
        </div>

        <OutlineButton title="Replace" fontSize="13px" width="80px" height="36px" radius="12px" onClick={() => {}} />
      </div>

      {/* Input fields */}
      <form className="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label className="block text-sm text-gray-400 mb-1">Cardholder name</label>
          <input
            type="text"
            placeholder="Full name"
            value={cardName}
            onChange={(e) => setCardName(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 focus:border-[#3b82f6] outline-none text-gray-200 placeholder-gray-500"
          />
        </div>

        <div>
          <label className="block text-sm text-gray-400 mb-1">Card number</label>
          <input
            type="text"
            placeholder="1234 5678 9012 3456"
            value={cardNumber}
            onChange={(e) => setCardNumber(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 focus:border-[#3b82f6] outline-none text-gray-200 placeholder-gray-500"
          />
        </div>

        <div>
          <label className="block text-sm text-gray-400 mb-1">Expiry (MM/YY)</label>
          <input
            type="text"
            placeholder="MM/YY"
            value={expiry}
            onChange={(e) => setExpiry(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 focus:border-[#3b82f6] outline-none text-gray-200 placeholder-gray-500"
          />
        </div>

        <div>
          <label className="block text-sm text-gray-400 mb-1">CVC</label>
          <input
            type="text"
            placeholder="CVC"
            value={cvc}
            onChange={(e) => setCvc(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 focus:border-[#3b82f6] outline-none text-gray-200 placeholder-gray-500"
          />
        </div>

        <div className="md:col-span-2">
          <label className="block text-sm text-gray-400 mb-1">Billing ZIP / Postal</label>
          <input
            type="text"
            placeholder="Postal / ZIP"
            value={zip}
            onChange={(e) => setZip(e.target.value)}
            className="w-full bg-transparent border-solid border-[#1f2533] rounded-lg px-4 py-2.5 focus:border-[#3b82f6] outline-none text-gray-200 placeholder-gray-500"
          />
        </div>
      </form>

      {/* Footer buttons */}
      <div className="flex justify-end gap-4 mt-8">
        <OutlineButton title="Cancel" fontSize="13px" width="80px" height="36px" radius="12px" onClick={() => {}} />
        <GradientButton title="Save" fontSize="13px" width="80px" height="36px" radius="12px" onClick={() => {}} />
      </div>
    </div>
  )
}
